<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="lsc">
    <script src="jquery-3.1.1.js"></script>
    <title>简易轮播图</title>
    <style>
        #outer{
            width: 520px;
            height: 280px;
            border: 1px solid red;
            margin: 100px auto;
            position: relative;
        }
        ul,li{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        li{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }
        li.active{
            display: block;
        }
    </style>
</head>
<body>
    <div id="outer">
        <ul>
            <li class="active"><img src="img/1.jpg" alt=""></li>
            <li><img src="img/2.jpg" alt=""></li>
            <li><img src="img/3.jpg" alt=""></li>
            <li><img src="img/4.jpg" alt=""></li>
            <li><img src="img/5.jpg" alt=""></li>
        </ul>
    </div>
</body>
</html>
<script>
window.onload = function(){

    var ali = ($('#outer li'))
    // 表示当前需要显示的li的索引
    var index = 0;
    console.dir(ali);
    setInterval(autoMove,2000);
  
    function autoMove(){
        
        index ++;
        // 当切换到最后一张图时，不要让index再增加了，
        // 让index等于0，然后从第一张再次开始
        if(index == ali.length){
            index = 0;
        }
        console.log(index);


        // for(var i = 0; i < ali.length; i++){
        //     ali[i].className = '';
        // }

        // ali[index].className = 'active';

       ali.eq(index).css('display','block');
       ali.eq(index).siblings().css('display','none');

    }
    
} 

</script>